<template>
    <div class="container">
        <header>中奖用户信息</header>
        <div class="content">
            <el-form :model="queryForm" label-width="100px" :inline="true" class="demo-ruleForm">
                <el-form-item label="活动列表">
                    <el-select v-model="queryForm.activityId"
                               @change="querySelectChange"
                               clearable
                               placeholder="请选择活动">
                        <el-option v-for="item in activityArr" :label="item.name" :value="item.id"
                                   :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户账号">
                    <el-input v-model="queryForm.phoneNum" clearable></el-input>
                </el-form-item>
                <el-form-item label="中奖编号查询">
                    <el-input v-model="queryForm.recordNo" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="pan-btn green-btn" @click="searchHandle">查询</el-button>
                    <el-button class="pan-btn green-btn" @click="exportHandle">导出</el-button>
                    <el-button class="pan-btn green-btn" @click="exportHandleSign">导出签约中奖用户信息</el-button>
                </el-form-item>
            </el-form>
            <el-table
                border
                width="100%"
                style="text-align: center;"
                :data="tableData"
                header-align="center"
                tooltip-effect="dark">
                <el-table-column
                    type="index"
                    width="50">
                </el-table-column>
                <el-table-column
                    prop="recordNo"
                    label="中奖编号">
                </el-table-column>
                <el-table-column
                    prop="activityName"
                    label="活动名称">
                </el-table-column>
                <el-table-column
                    prop="phoneNum"
                    label="用户账号">
                </el-table-column>
                <el-table-column
                    prop="createDate"
                    :formatter="timeFormat"
                    label="参与时间">
                </el-table-column>
                <el-table-column
                    prop="prizeName"
                    label="奖品名称">
                </el-table-column>
                <el-table-column
                    prop="prizeType"
                    :formatter="typeFormat"
                    label="奖品类型">
                </el-table-column>
                <el-table-column
                    prop="couponCodeMessage"
                    label="中奖劵码">
                </el-table-column>
                <el-table-column
                    prop="consumeScore"
                    label="消耗积分值">
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <el-pagination
                @current-change="handleCurrentChange"
                :page-size="10"
                :total=total
                :current-page.sync="currentPageNum"
                layout="prev, pager, next, jumper">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {parseTime} from '@/utils/index'

    export default {
        name: 'LuckUser',
        data() {
            return {
                queryForm: {
                    activityId: '',
                    phoneNum: '',
                    recordNo: '',
                    prizeType: 0,
                    begin: 0,
                    count: 10
                },
                total: 0,
                currentPageNum: 1,
                tableData: [],
                activityArr: [],
                page: 'page'
            }
        },
        watch: {
            'queryForm.begin': {
                handler() {
                    this.currentPageNum = this.queryForm.begin + 1;
                },
                deep: true,
                immediate: false
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.getActivityList();
                this.getLuckUserList();
            })
        },
        methods: {
            querySelectChange() {
                this.queryForm.begin = 0;
            },
            getActivityList() {
                const _this = this;
                _this.axios({
                    url: '/activityConsole/data-statists/get-activitys'
                }).then(res => {
                    _this.activityArr = res.data
                }).catch(err => {
                    console.log(err)
                })
            },
            getLuckUserList(value) {
                const _this = this;
                console.log(value);
                if (value !== 'page') {
                    _this.queryForm.begin = 0
                }
                _this.axios({
                    url: '/activityConsole/data-statists/find-all-by-conditions',
                    params: _this.queryForm
                }).then(res => {
                    console.log(res);
                    _this.tableData = res.data.data;
                    _this.total = parseInt(res.data.description)
                }).catch(err => {
                    console.log(err)
                })
            },
            timeFormat(row, column) {
                const date = row[column.property];
                return parseTime(date)
            },
            typeFormat(row, column) {
                const type = row[column.property];
                if (type === 'RECHARGE_CARD') {
                    return '充值卡'
                }
                if (type === 'FLOW_PACKAGE') {
                    return '流量包'
                }
                if (type === 'ELECTRONIC_COUPON') {
                    return '电子优惠券'
                }
                if (type === 'ENTITY_GIFFT') {
                    return '实物礼品'
                }
                if (type === 'THANKS_PARTICIPATE') {
                    return '谢谢参与'
                }
                if (type === 'CLUB_INTEGRAL') {
                    return '俱乐部积分'
                }
                if (type === 'QY_RECHARGE') {
                    return '权益会员直充'
                }
            },
            searchHandle() {
                this.getLuckUserList();
            },
            exportHandle() {
                this.$confirm('此操作导出文件有可能过大,请勿连续点击, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("数据量大导出测试");
                    let exportUrl = '/activityConsole/data-statists/export-by-conditions?activityId=' + this.queryForm.activityId + '&phoneNum=' + this.queryForm.phoneNum + '&recordNo=' + this.queryForm.recordNo + '&prizeType=' + this.queryForm.prizeType;
                    console.log(exportUrl);
                    let a = document.createElement('a');
                    a.setAttribute('href', exportUrl);
                    a.setAttribute('download', '');
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    this.$message({
                        type: 'success',
                        message: '导出中请勿着急!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消导出'
                    });
                });
            },
            exportHandleSign() {
                window.location.href = '/activityConsole/data-statists/export-by-signMessage'
            },
            handleCurrentChange(val) {
                this.queryForm.begin = parseInt(val) - 1;
                this.getLuckUserList(this.page)
            }
        }
    }
</script>
<style scoped>
    header {
        margin: 0 0 10px;
    }

    .footer {
        margin-top: 10px;
        text-align: center;
    }
</style>
